<template>
	<view class="container">
		<view class="header">

			<u-input class="input" placeholder="搜索" prefixIcon="search" @change="search"
				prefixIconStyle="font-size: 22px;color: #909399" v-model="params.condition"></u-input>

		</view>
		<view class="sort-box">
			<view v-for="(item,index) in tabs" :class="currentTab==index?'item active':'item'"
				@click="changeTab(index)">
				{{item}}
			</view>
		</view>
		<view class="date">
			<view class="text">
				<view class="">
					年
				</view>
				<view class="">
					月
				</view>
				<view class="">
					日
				</view>
				<view class="">
					时
				</view>
			</view>
		</view>
		<view class="line">

		</view>
		<scroll-view scroll-y class="scroll-box">
			<view class="item" v-for="item in list" @click="toDetail(item)">
				<view class="left">
					<view class="flex">
						<view class="name">
							{{item.name}}
						</view>
						<view class="status" :style={backgroundColor:baikeStatus[item.status+1].bgColor}>
							{{baikeStatus[item.status+1].name}}
						</view>
					</view>
					<view class="flex">
						<view class="sex">
							{{item.sex==1?'男':'女'}}
						</view>
						<view class="">
							{{item.birthday}}
						</view>
					</view>
					<view class="group">
						创建人:{{item.nickName||''}}
					</view>
				</view>
				<view class="right">
					<view class="row" style="margin-bottom: 26rpx;">
						<view class="" :style={color:colors[item.nianZhu[0]]}>
							{{item.nianZhu[0]}}
						</view>
						<view class="" :style={color:colors[item.yueZhu[0]]}>
							{{item.yueZhu[0]}}
						</view>
						<view class="" :style={color:colors[item.riZhu[0]]}>
							{{item.riZhu[0]}}
						</view>
						<view class="" :style={color:colors[item.shiZhu[0]]}>
							{{item.shiZhu[0]}}
						</view>
					</view>
					<view class="row">
						<view class="" :style={color:colors[item.nianZhu[1]]}>
							{{item.nianZhu[1]}}
						</view>
						<view class="" :style={color:colors[item.yueZhu[1]]}>
							{{item.yueZhu[1]}}
						</view>
						<view class="" :style={color:colors[item.riZhu[1]]}>
							{{item.riZhu[1]}}
						</view>
						<view class="" :style={color:colors[item.shiZhu[1]]}>
							{{item.shiZhu[1]}}
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="status" />
		</scroll-view>
		<view class="add" @click="toChooseObject">
               <u-icon name="plus" size="60" color="#fff"></u-icon>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { $http, textColors, usePaginatedList,getWxPaySign,initBaiduStatistics } from "@/common"
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	const colors = ref(textColors)

	const tabs = ref(['热门名人', '最新创建', '我的收藏', '我的百科', '最近浏览'])
	// wikiSubmit:"/client/h5/bazi/wiki/new",// 百科-最近创建
	// wikiCelebrity:"/client/h5/bazi/wiki/celebrity",//百科-热门名人
	// wikiMine:"/client/h5/bazi/wiki/mine",//百科-我的百科
	// wikiDetail:"/client/h5/bazi/wiki/detail"//百科-百科详情
	const fetchFunction = (query) => {
		let apiNames = ['wikiCelebrity', 'wikiNew', 'wikiCollection', 'wikiMine', 'wikiView']
		return $http.get(apiNames[currentTab.value], query)
	}
	const params = ref({
		condition:''
	})
	const baikeStatus = ref([
		{
			name:'未通过',
			bgColor:'#FF0000'
		},
		{
			name:'待提交',
			bgColor:'#FFA500'
		},
		{
			name:'待审核',
			bgColor:'#42b983'
		},
		{
			name:'审核通过',
			bgColor:'#42b983'
		}
	])
	const {
		list,
		fetchList,
		reachBottom,
		onPullDown,
		status
	} = usePaginatedList(fetchFunction, params)
	onShow(() => {
		fetchList(true)
	})
	onLoad(()=>{
		getWxPaySign('幸运指南','专业好用的八字软件;支持手机和电脑使用;让易学数据世代相传。')
	})
	onReachBottom(() => {
		console.log('触底了')
		reachBottom()
	})
	onPullDownRefresh(() => {
		console.log('下拉刷新了')
		onPullDown()
	})
	const currentTab = ref(0)
	const changeTab = (index) => {
		currentTab.value = index
		fetchList(true)
	}
	const toChooseObject = () => {
		uni.navigateTo({
			url: '/pages/baike/choose-baike'
		})
	}

	const toDetail = (item) => {
		if(item.status==0){
			uni.navigateTo({
				url: '/pages/baike/baike-result?qiPanId='+item.qiPanId+'&name='+item.name+'&id='+item.id
			})
		}else{
			uni.navigateTo({
				url: '/pages/baike/baike-detail?id=' + item.id +'&qiPanId='+item.qiPanId+'&deed='+item.deed
			})
		}
	}
	const search = (val) => {
		params.value.condition = val
		fetchList(true)
	}
</script>

<style lang="less" scoped>
	.container {
		background-color: #fff;
		height: 100vh;

		.header {
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 9;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 50px;
			padding: 0 30rpx;
			background-color: #fff;

			.input {
				height: 60rpx;
				border-radius: 30rpx;
				margin: 0 20rpx;
			}
		}

		.sort-box {
			position: fixed;
			top: 50px;
			z-index: 9;
			width: 100%;
			display: flex;
			justify-content: space-between;
			height: 25px;
			padding: 0 30rpx;
			background-color: #fff;

			.item {
				display: flex;
				align-items: center;

				.text {
					margin-right: 8rpx;
				}
			}

			.active {
				color: #42b983;
			}
		}

		.date {
			position: fixed;
			top: 75px;
			width: 100%;
			height: 25px;
			z-index: 9;
			line-height: 50rpx;
			display: flex;
			justify-content: flex-end;
			padding: 0 30rpx;
			background-color: #fff;

			.text {
				display: flex;
				color: #C0C0C0;

				view {
					margin-left: 40rpx;
				}
			}
		}

		.line {
			position: fixed;
			top: 100px;
			width: 100%;
			height: 10px;
			background-color: #F9F9F9;
			z-index: 99;
		}

		.scroll-box {
			padding: 0 30rpx 180rpx 30rpx;
			margin-top: 110px;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #ccc;

				.left {
					.name {
						font-size: 40rpx;
					}

					.flex {
						display: flex;
						align-items: center;
						margin: 10rpx 0;
						color: #C0C0C0;

						.sex {
							margin-right: 10rpx;
						}
						.name{
							color: #000000;
						}
						.status{
						   color: #fff;
						   padding:2rpx 6rpx;
						   margin-left: 20rpx;
						   border-radius: 6rpx;
						}
					}

					.group {
						color: #C0C0C0;
					}
				}

				.right {
					.row {
						display: flex;

						view {
							font-size: 38rpx;
							margin-left: 30rpx;
						}
					}
				}
			}
		}

		.add {
			position: fixed;
			bottom: 200rpx;
			right: 100rpx;
			background-color: #3A95FF;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>